<template>
  <page-wrap back title="AI面评" hide-tab stay-still :hideSafeArea="true" :bg-color="uNavColor" :isMonitorBack="true"
    @onMonitorBack="onGobackAction">

    <live-pusher id='livePusher' ref="livePusher" class="livePusher" :url="pushUrl" mode="RTC" :enable-mic="true"
      :enable-camera="isOpenCamera" :auto-focus="true" :orientation="vertical" :beauty="1" whiteness="2" aspect="9:16"
      @statechange="statechange" @netstatus="netstatus" @error="errorInfo"></live-pusher>

    <div class="container">
      <div class="container-body">
        <div class="header-top-box"></div>

        <div class="header">
          <image class="headerImg" :src="headPic"></image>
          <div style="display: flex; flex-direction: column; margin: 10px 16px">
            <span
              style="font-size: 22px; font-weight: bold; color: white">{{ allData.issure.answerNum }}/{{ allData.issure.questions.length }}</span>
            <span v-if="allData.issure.questions.length > 0" id="question"
              style="font-size: 16px; font-weight: bold; color: white">{{ allData.isFromIndex != 0 ? allData.issure.questions[allData.issure.answerNum-1].title : allData.issure.questions[allData.issure.answerNum-1].questionTitle }}</span>
          </div>
        </div>

        <div class="body-bottom-box" v-if="isShowBottomMark"></div>
      </div>

      <div class="system-read-box" v-if="isShowSystemRead">
        <div class="circle-box">
          <span class="system-reading-text">系统读题中</span>
        </div>
        <div class="system-read-bottom-tip">请适当调节设备音量</div>
      </div>

      <div class="system-read-box" v-if="isShowThinkTime">
        <div class="circle-box">
          <span class="system-reading-text" v-if="isShowthinkTimeText">思考时间</span>
          <span class="system-reading-text">{{ thinkIntervalNum }}</span>
        </div>
        <div class="system-read-bottom-tip">思考结束后开始答题</div>
      </div>
      <div class="beginDown">
        <span id="countdownText">{{ countdownText }}</span>
      </div>
      <!-- <view class="videoActbtn" @click="openCameraAction">{{isOpenCamera ? "关闭" : "开启"}}摄像头</view> -->
      <div class="nextArea" :style="{ bottom: nextAreaMarginBottom }">
        <span class="nextdown" id="nextdown">{{ nextdownCount }}</span>
        <u-button v-if="showNextBtn" class="nextBtn" shape="circle" type="error" :loading="btnLoading"
          :custom-style="customStyle" @click="nextAction">{{ btnTitle }}</u-button>
        <u-button v-else-if="!showBeginMarkView && showBeginNewBtn" class="nextBtn" shape="circle" type="error"
          :custom-style="customStyle" @click="beginNowAction">立即答题</u-button>
      </div>
      <div class="beginMarkView" v-if="showBeginMarkView" @click.stop="beginAction">
        <image class="bgImg" :src="beginIconPic"></image>
        <div class="mark-text">点击开始面试</div>
      </div>
    </div>

    <u-modal v-model="shoContent" :content="content" @confirm="clickConfirm"></u-modal>
  </page-wrap>
</template>


<script>
import common from "@/api/common.js";

import {
  startQuestionAnswer,
  endQuestionAnswer,
  reqZhituReportBegin,
  reqZhituReportEnd,
} from "@/api/modules/company.js";
import { addBuryingPoint } from "@/api/modules/career";

export default {
  data() {
    return {
      headPic: this.$imgBaseSelf + "aiInterview/headg.png",
      beginIconPic: this.$imgBaseSelf + "aiInterview/beginIcon.png",
      content: "面试已中断，请退出后再试",
      shoContent: false,
      allData: {
        issure: {
          questions: [],
          answerNum: 0,
        },
        info: {},
        isTest: false,
      },
      btnTitle: "答完了，下一题",
      customStyle: {
        color: "white",
      },
      btnLoading: false,
      isOpenCamera: true,
      nextdownCount: "",
      countdownText: "",
      innerAudioContext: undefined,
      isHiddened: false, // 是否中断过
      pushUrl: "",

      onAuthorization: true,
      showBeginMarkView: true,

      showNextBtn: false,
      showBeginNewBtn: false,
      isCallbackTriggered: false,

      isShowBottomMark: false,
      isShowSystemRead: false,
      nextAreaMarginBottom: "40px",
      //思考时间倒计时器
      countdownThinkInterval: undefined,
      thinkIntervalNum: "",
      isShowThinkTime: false,
      isShowthinkTimeText: true,
      // 答题倒计时器
      countdownAnswerInterval: undefined,

      onBeginNowAction: false,
      countdown: 10,
    };
  },

  onLoad: function (options) {
    let that = this;
    // isFromIndex:3=首页推广扎堆活动；2=职途；1=招聘会； 0=企业邀请
    uni.getStorage({
      key: "params-interviewReady",
      success: function (res) {
        var data = res.data;
        console.log("🚀 ~ data: 134-----", data);
        if (data.isTest) {
          data.issure = {
            answerNum: 1,
            questions: that.getExperienceQuestions(data.isFromIndex != 0),
          };
        } else {
          if (data.isFromIndex != 0) {
            that.pushUrl = data.zhituData.rtmpUrl;
            data.issure = {
              answerNum: data.zhituData.questionNum,
              questions: data.zhituInfo.questions,
            };
          } else {
            that.pushUrl = data.info.rtmpUrl;
          }
          if (data.issure.questions.length == data.issure.answerNum) {
            that.btnTitle = "结束面试";
          }
        }
        that.allData = data;
      },
    });

    this.innerAudioContext = wx.createInnerAudioContext({
      useWebAudioImplement: false, // 是否使用 WebAudio 作为底层音频驱动，默认关闭。对于短音频、播放频繁的音频建议开启此选项，开启后将获得更优的性能表现。由于开启此选项后也会带来一定的内存增长，因此对于长音频建议关闭此选项
    });
    this.innerAudioContext.onEnded(() => {
      console.log("----读题完毕");
      this.nextCountdown();
    });

    let idx = this.allData.isFromIndex | 0;
    wx.reportEvent("ai_beginning", {
      come_from: idx == 0 ? "企业邀请面试" : (idx = 2 ? "职途" : "其它"),
    });
  },
  onReady() {
    this.context = uni.createLivePusherContext("livePusher", this);
    this.startPreview();
    this.start();
  },

  onUnload() {
    this.audioDestroy();
  },

  onShow() {
    if (this.isHiddened) {
      console.log("🚀----退出了面试--");
      this.shoContent = true;
    }
    // 保持屏幕常亮
    uni.setKeepScreenOn({
      keepScreenOn: true,
    });
  },

  onHide() {
    this.isHiddened = true;
    this.audioDestroy();
    uni.setKeepScreenOn({
      keepScreenOn: false,
    });
  },

  methods: {
    onGobackAction() {
      uni.showModal({
        title: "提示",
        content: "确定要离开当前页面吗？",
        success: (res) => {
          if (res.confirm) {
            uni.navigateBack();
          }
        },
      });
    },

    audioDestroy() {
      this.innerAudioContext.destroy();
      this.innerAudioContext = undefined;
      this.finishThinkCountdown();
      this.finishAnswerInterval();
      this.stopPreview();
      this.stop();
    },

    gobackOn2s() {
      setTimeout(() => {
        uni.navigateBack();
      }, 2000);
    },
    binderrorInfo(info) {
      console.log("🚀 ~ binderrorInfo ~ info:", info);
    },
    bindchange(detail) {
      console.log("🚀 ~ bindchange ~ detail:", detail);
    },
    statechange(e) {
      let code = e.detail.code;
      console.log("----直播状态:" + code);
      if (code == 10001 || code == -1301) {
        this.onAuthorization = false;
        uni.showToast({
          title: `摄像头被禁用或打开失败`,
          icon: "error",
        });
        this.gobackOn2s();
      } else if (code == 10002 || code == -1302) {
        this.onAuthorization = false;
        console.log("---麦克风被禁用或打开失败 code:", code);
        uni.showToast({
          title: "麦克风被禁用或打开失败",
          icon: "error",
        });
        this.gobackOn2s();
      } else if (code == 1001) {
        console.log("---已经连接推流服务器 code:", code);
        // uni.showToast({
        //   title: "已经连接推流服务器",
        //   icon: "success",
        // });
      } else if (code == 1102) {
        console.log("---网络断连, 已启动自动重连 code:", code);
        uni.showToast({
          title: "网络连接失败",
          icon: "error",
        });
        this.gobackOn2s();
      } else if (code == -1307) {
        console.log(
          "---网络断连，且经多次重连抢救无效，更多重试请自行重启推流 code:",
          code
        );
        uni.showToast({
          title: "网络连接失败",
          icon: "error",
        });
        this.gobackOn2s();
      } else if (code == -1308) {
        console.log("---开始录屏失败，可能是被用户拒绝 code:", code);
        uni.showToast({
          title: "开始录屏失败，可能是被用户拒绝",
          icon: "error",
        });
        this.gobackOn2s();
      } else if (code == -1309) {
        console.log(
          "---录屏失败，不支持的Android系统版本，需要5.0以上的系统 code:",
          code
        );
        uni.showToast({
          title: "录屏失败，需要Android 5.0以上的系统",
          icon: "error",
        });
        this.gobackOn2s();
      } else if (code == -1310) {
        console.log("---录屏被其他应用打断了 code:", code);
        uni.showToast({
          title: "录屏被其他应用打断了",
          icon: "error",
        });
        this.gobackOn2s();
      } else if (code == -1311) {
        console.log("---Android Mic打开成功，但是录不到音频数据 code:", code);
        uni.showToast({
          title: "Android Mic打开成功，但是录不到音频数据",
          icon: "error",
        });
        this.gobackOn2s();
      } else if (code == -1312) {
        console.log("---推流：录屏动态切横竖屏失败：code:", code);
        uni.showToast({
          title: "推流：录屏动态切横竖屏失败",
          icon: "error",
        });
      }
    },

    start: function () {
      this.context.start({
        success: (a) => {
          console.log("---livePusher.start:" + JSON.stringify(a));
        },
      });
    },
    stop: function () {
      this.context.stop({
        success: (a) => {
          console.log("---livePusher.stop:" + JSON.stringify(a));
        },
      });
    },
    startPreview: function () {
      this.context.startPreview({
        success: (a) => {
          console.log("---livePusher.startPreview:" + JSON.stringify(a));
        },
      });
    },
    stopPreview: function () {
      this.context.stopPreview({
        success: (a) => {
          console.log("---livePusher.stopPreview:" + JSON.stringify(a));
        },
      });
    },
    netstatus(e) {
      // 网络状态（被调用频繁）
      //console.log("netstatus:" + JSON.stringify(e));

      let code = e.detail.code;
      if (code == 10001 || code == -1301) {
      }
    },
    errorInfo(e) {
      console.log("----error:" + JSON.stringify(e));
      let code = e.detail.errCode;
      this.onAuthorization = false;
      if (code == 10001) {
        console.log("---用户禁止使用摄像头");
      } else if (code == 10002) {
        console.log("---用户禁止使用录音");
      } else if (code == 10003) {
        console.log("---背景音资源（BGM）加载失败");
      } else if (code == 10004) {
        console.log("---等待画面资源（waiting-image）加载失败");
      }
      // uni.showToast({
      //   title: JSON.stringify(e),
      //   icon: "error",
      // });
    },
    // close: function() {
    //     this.context.close({
    //         success: (a) => {
    //             console.log("---livePusher.close:" + JSON.stringify(a));
    //         }
    //     });
    // },
    // snapshot: function() {
    //     this.context.snapshot({
    //         success: (e) => {
    //             console.log(JSON.stringify(e));
    //         }
    //     });
    // },
    // resume: function() {
    //     this.context.resume({
    //         success: (a) => {
    //             console.log("---livePusher.resume:" + JSON.stringify(a));
    //         }
    //     });
    // },
    // pause: function() {
    //     this.context.pause({
    //         success: (a) => {
    //             console.log("---livePusher.pause:" + JSON.stringify(a));
    //         }
    //     });
    // },
    // switchCamera: function() {
    //     this.context.switchCamera({
    //         success: (a) => {
    //             console.log("---livePusher.switchCamera:" + JSON.stringify(a));
    //         }
    //     });
    // },

    openCameraAction() {
      if (this.isOpenCamera) {
        this.isOpenCamera = false;
        // this.context.enableCamera = false;
      } else {
        this.isOpenCamera = true;
        // this.context.enableCamera = true;
      }
      console.log(
        "🚀 ~ openCameraAction ~ this.isOpenCamera:",
        this.isOpenCamera
      );
    },

    // 开始面试
    beginAction() {
      if (this.onAuthorization) {
        this.showBeginMarkView = false;
        this.showBeginNewBtn = true;
        this.playVideo();
      } else {
        // uni.showToast({
        //   title: "摄像头和麦克风授权失败，请退出页面后再试",
        //   icon: "none",
        // });
        // 2秒扫退出
        // this.gobackOn2s();

        uni.showModal({
          title: "提示",
          content:
            "请点击小程序右上角“...”选择“设置”，打开摄像头与麦克风授权，再进行面试",
          confirmText: "确定",
          confirmColor: "#E18831",
          showCancel: false,
          success: (res) => {
            if (res.confirm) {
              uni.navigateBack();
            }
          },
        });
      }
    },

    // 播放题目
    playVideo() {
      this.isShowBottomMark = true;
      this.isShowSystemRead = true;
      let obj =
        this.allData.issure.questions[this.allData.issure.answerNum - 1];
      this.innerAudioContext.src =
        this.allData.isFromIndex == 0 ? obj.questionTtsUrl : obj.ttsUrl;
      console.log("-----开始读题");
      this.innerAudioContext.play();
    },

    // 立即答题
    beginNowAction() {
      console.log("-----立即答题");

      // ---- 方式1

      // this.thinkIntervalNum = "开始作答";
      // this.isShowthinkTimeText = false;

      // this.innerAudioContext.stop();
      // this.showBeginNewBtn = false;
      // this.isShowSystemRead = false;
      // this.isCallbackTriggered = false;
      // this.startAnswer();
      // this.finishThinkCountdown();
      // setTimeout(() => {
      //   this.countdownEnd();
      // }, 1000);

      // ---- 方式2
      this.showBeginNewBtn = false;
      this.onBeginNowAction = true;
      this.innerAudioContext.stop();
      this.nextCountdown();
    },

    // 用户主动结束作答
    nextAction() {
      this.btnLoading = true;
      setTimeout(() => {
        this.btnLoading = false;
        this.endQuestionAnswer();
      }, 3000);
    },

    // 进入下一题
    nextStep() {
      this.showBeginNewBtn = true;
      let issure = this.allData.issure.questions;
      var currentIndex = this.allData.issure.answerNum - 1;
      let nextIndex = currentIndex + 1;
      if (issure.length > nextIndex) {
        this.allData.issure.answerNum = nextIndex + 1;
        if (issure.length <= nextIndex + 1) {
          this.btnTitle = this.allData.isTest ? "结束面试体验" : "结束面试";
        }
        this.playVideo();
      } else {
        this.stop();
        if (this.allData.isTest) {
          uni.navigateBack();
        } else {
          let url = "./interviewEnd?fromIndex=" + this.allData.isFromIndex;
          uni.redirectTo({
            url: url,
          });
        }
      }
    },

    // 进入思考倒计时
    nextCountdown() {
      if (!this.isCallbackTriggered) {
        this.isCallbackTriggered = true; // 标记回调函数已经触发过
        this.isShowSystemRead = false;
        this.countdownThink();
      }
    },

    // 思考时间倒计时
    countdownThink: function () {
      if (this.onBeginNowAction) {
        this.onBeginNowAction = false;
        this.countdown = 1;
        this.isShowthinkTimeText = false;
      } else {
        this.countdown = 30;
        this.thinkIntervalNum = this.countdown + "";
        this.isShowthinkTimeText = true;
      }
      this.finishThinkCountdown();
      this.isShowThinkTime = true;
      let that = this;
      this.countdownThinkInterval = setInterval(function () {
        if (that.onBeginNowAction) {
          that.onBeginNowAction = false;
          that.countdown = 1;
        }
        that.countdown--;
        if (that.countdown > 0) {
          that.thinkIntervalNum = that.countdown + "";
        } else if (that.countdown == 0) {
          console.log("-----开始作答");
          that.thinkIntervalNum = "开始作答";
          that.isShowthinkTimeText = false;
          that.isCallbackTriggered = false;
          that.showBeginNewBtn = false;
          that.startAnswer();
        } else {
          that.isCallbackTriggered = false;
          that.finishThinkCountdown();
          that.countdownEnd();
        }
      }, 1000);
    },

    // 作答倒计时
    countdownEnd() {
      this.isShowBottomMark = false;
      this.finishAnswerInterval();
      var countdown = 180;
      let text = "答题结束倒计时:";
      this.nextdownCount = text + countdown + "秒";
      let that = this;
      this.countdownAnswerInterval = setInterval(function () {
        countdown--;
        if (countdown > 0) {
          that.nextdownCount = text + countdown + "秒";
          if (countdown <= 175) {
            that.showNextBtn = true;
          }
        } else if (countdown == 0) {
          that.countdownText = "作答结束";
          that.nextdownCount = text + countdown + "秒";
        } else {
          that.countdownText = "";
          that.nextdownCount = "";
          that.finishAnswerInterval();
          that.nextAction();
        }
      }, 1000);
    },

    // 上报开始作答
    startAnswer() {
      if (this.allData.isTest) {
        return;
      }

      if (this.allData.isFromIndex != 0) {
        this.startZhituAnswer();
        return;
      }

      let obj = this.allData.info;
      let params = {
        id: obj.intervieweeInterviewInfoId,
        answerQuestionNum: this.allData.issure.answerNum,
        answerLiveStreamName: obj.streamName,
        answerLivePushUrl: obj.rtmpUrl,
        interviewToken: obj.interviewToken,
      };
      startQuestionAnswer(params).then((res) => {
        console.log(
          "🚀 ~ file:  开始作答-",
          this.allData.issure.answerNum,
          "结果res:",
          res
        );
      });
    },

    // 上报结束作答
    endQuestionAnswer() {
      this.showNextBtn = false;
      this.finishAnswerInterval();
      if (this.allData.isTest) {
        this.nextStep();
        return;
      }

      if (this.allData.isFromIndex != 0) {
        this.endZhituAnswer();
        return;
      }

      let obj = this.allData.info;
      let num = this.allData.issure.answerNum;
      let params = {
        id: obj.intervieweeInterviewInfoId,
        answerQuestionNum: num,
        interviewToken: obj.interviewToken,
      };

      endQuestionAnswer(params).then((res) => {
        console.log("🚀 ~ file:  结束作答-", num, "结果res:", res);
        this.nextStep();
      });
    },

    // 上报职途开始作答
    startZhituAnswer() {
      let num = this.allData.issure.answerNum;
      let params = {
        recordId: this.allData.zhituData.recordId,
        questionNum: num,
        answerLiveStreamName: this.allData.zhituData.streamName,
        answerLivePushUrl: this.allData.zhituData.rtmpUrl,
      };
      reqZhituReportBegin(params).then((res) => {
        console.log("🚀 ~ file:  职途开始作答-", num, "结果res:", res);
      });
    },
    // 上报职途结束作答
    async endZhituAnswer() {
      this.showNextBtn = false;
      this.finishAnswerInterval();
      if (this.allData.isTest) {
        return;
      }

      let num = this.allData.issure.answerNum;
      let params = {
        recordId: this.allData.zhituData.recordId,
        questionNum: num,
      };
      await reqZhituReportEnd(params).then((res) => {
        console.log("🚀 ~ file:  职途结束作答-", num, "结果res:", res);
        this.addBuryingPointFn(50036, "", "", "", "");
        this.nextStep();
      });
    },

    finishThinkCountdown() {
      this.isShowThinkTime = false;
      if (this.countdownThinkInterval) {
        clearInterval(this.countdownThinkInterval);
      }
      this.countdownThinkInterval = undefined;
    },

    finishAnswerInterval() {
      if (this.countdownAnswerInterval) {
        clearInterval(this.countdownAnswerInterval);
      }
      this.nextdownCount = "";
      this.countdownAnswerInterval = undefined;
    },

    // 体验问题列表
    getExperienceQuestions(isZhitu) {
      var result;
      if (isZhitu) {
        result = [
          {
            questionId: "",
            questionNum: 1,
            questionStandardAnswer: null,
            title: "请您简单做一次自我介绍",
            ttsUrl: "https://img3.job1001.com/ylt/audio/aiInterview/mq1.mp3",
          },
          {
            questionId: "",
            questionNum: 2,
            questionStandardAnswer: null,
            title: "请您简单描述加入我们公司的原因",
            ttsUrl: "https://img3.job1001.com/ylt/audio/aiInterview/mq2.mp3",
          },
        ];
      } else {
        result = [
          {
            questionId: "",
            questionNum: 1,
            questionStandardAnswer: null,
            questionTitle: "请您简单做一次自我介绍",
            questionTtsUrl:
              "https://img3.job1001.com/ylt/audio/aiInterview/mq1.mp3",
          },
          {
            questionId: "",
            questionNum: 2,
            questionStandardAnswer: null,
            questionTitle: "请您简单描述加入我们公司的原因",
            questionTtsUrl:
              "https://img3.job1001.com/ylt/audio/aiInterview/mq2.mp3",
          },
        ];
      }

      return result;
    },

    clickConfirm() {
      uni.navigateBack();
    },
    //普通的埋点+事件停留埋点
    async addBuryingPointFn(
      etId,
      statType,
      jumpPersonId,
      jumpSource,
      sourceType
    ) {
      const params = {
        etId: etId,
        id: this.buryingPointId ? this.buryingPointId : "", //后台要求不能传空，未登录也要统计
        personId: uni.getStorageSync("person-id").slice(2) || "0",
        cardType: uni.getStorageSync("cardType"),
        consultantId: "",
        originType: 20,
        statType: statType ? statType : "10",
        jumpPersonId: jumpPersonId,
        jumpSource: jumpSource,
        sourceType: sourceType,
      };
      const res = await addBuryingPoint(params);
    },
  },
};
</script>

<style scoped>
.livePusher {
  width: 100%;
  height: calc(100vh - 140rpx);
}

.container {
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0px;
}

.container-body {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  z-index: 1;
  position: relative;
  top: 0;
}
.header-top-box {
  width: 100%;
  background-color: rgba(89, 92, 92, 0.7);
}
.header {
  background-color: rgba(89, 92, 92, 0.7);
  width: 100%;
  display: flex;
}
.body-bottom-box {
  background-color: rgba(89, 92, 92, 0.7);
  width: 100%;
  flex: 1;
}
#local_video {
  width: 100%;
  /* height: 100%; */
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
}
.headerImg {
  width: 113px;
  min-width: 113px;
  height: 150px;
}

.system-read-box {
  position: absolute;
  top: 35%;
  text-align: center;
  width: 100%;
  color: white;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.system-reading-text {
  color: white;
  font-size: 20px;
}
.system-read-bottom-tip {
  color: white;
  font-size: 18px;
  margin-top: 10px;
}
.circle-box {
  width: 33vw;
  height: 33vw;
  border-radius: 50%;
  background: #7f7f7f;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.videoActbtn {
  position: absolute;
  right: 0;
  top: 400rpx;
  color: white;
  background-color: orange;
  padding: 10rpx 16rpx 10rpx 30rpx;
  border-top-left-radius: 20rpx;
  border-bottom-left-radius: 20rpx;
  z-index: 2;
}

.beginDown {
  font-size: 50px;
  font-weight: bold;
  position: absolute;
  top: 50%;
  text-align: center;
  width: 100%;
  height: 125px;
  color: white;
  z-index: 3;
}
.nextArea {
  position: absolute;
  bottom: 40px;
  height: 125px;
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  z-index: 2;
}

.nextBtn {
  color: white;
  height: 44px;
  line-height: 44px;
  font-size: 14px;
  text-align: center;
  border-radius: 25px;
  background: #f75a3e;
  width: 90%;
}
.nextdown {
  color: white;
  height: 30px;
  font-size: 14px;
  text-align: center;
}

audio {
  width: 100%;
  display: none;
}
.beginMarkView {
  background-color: rgba(89, 92, 92, 0.7);
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 10;
}

.mark-text {
  color: white;
  font-size: 14px;
  margin-top: 10px;
}
.bgImg {
  width: 80px;
  height: 80px;
}
</style>
